<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--[if lt IE 9]><!-->
		<script src="http://code.jquery.com/jquery-1.11.3.min.js "></script>
		<!--<![endif]-->
		<!--[if gte IE 9]><!-->
		<script src="https://code.jquery.com/jquery-3.2.1.min.js "></script>
		<!--<![endif]-->
		<script>
			/*------------1111111111-----------------*/
			/*
			 *event.currentTarget 属性是在事件冒泡阶段内的当前 DOM 元素，通常等于 this。
			 */
			/*$(document).ready(function() {
				$("h1,h2").click(function(event) {
					alert(event.currentTarget === this);
				});
			});*/

			/*--------------22222222---------------*/
			/*
			 *event.data 属性包含当前执行的处理程序被绑定时传递到事件方法的可选数据。
			 */
			/*$(document).ready(function() {
				$("p").each(function(i) {
					$(this).on("click", {
						x: i
					}, function(event) {
						alert("序号：" + $(this).index() + "。段落的数据为: " + event.data.x);
					});
				});
			});*/

			/*------------333333333333333-----------------*/
			/*
			 *event.delegateTarget 属性返回当前调用的 jQuery 事件处理程序所添加的元素。
			 * 该属性对于由 on() 方法添加的委托事件非常有用，事件处理程序是在元素的祖先被处理时添加的。
			 * 提示：如果事件直接绑定到元素且没有委托发生，则 event.delegateTarget 等同于 event.currentTarget
			 */
			/*$(document).ready(function() {
				$("div").on("click", "button", function(event) {
					$(event.delegateTarget).css("background-color", "pink");
				});
			});*/
			/*--------------4444444444444---------------*/
			/*
			 * event.isDefaultPrevented() 方法检查指定的事件上是否调用了 preventDefault() 方法。
			 */
			/*$(document).ready(function() {
				$("a").click(function(event) {
					event.preventDefault();
					alert("检查 preventDefault() 是否被调用: " + event.isDefaultPrevented());
				});
			});*/

			/*-------------55555555555555----------------*/
			/*
			 * 该方法检查指定的事件上是否调用了 event.stopImmediatePropagation() 方法。
			 * 如果 event.stopImmediatePropagation() 被调用则该方法返回 true，否则返回 false。
			 */
			/*$(document).ready(function() {
				$("div").click(function(event) {
					event.stopImmediatePropagation();
					alert("检测 event.stopImmediatePropagation() 是否被调用: " + event.isImmediatePropagationStopped());
				});
			});*/
			/*----------------66666666666-------------*/
			/*
			 * event.isPropagationStopped() 方法检查指定的事件上是否调用了 event.stopPropagation()。
			 * 如果 event.stopPropagation() 被调用则该方法返回 true，否则返回 false。
			 */
			/*$(document).ready(function() {
				$("div").click(function(event) {
					event.stopPropagation();
					alert("检测 event.stopPropagation() 是否被调用: " + event.isPropagationStopped());
				});
			});*/

			/*--------------77777777777---------------*/
			/*
			 * 当事件被触发时，event.namespace 属性返回自定义命名空间。
			 * 该属性可被插件作者用来根据所使用的命名空间以不同的方式处理任务。
			 * 提示：对于 jQuery 而言，以下划线开始的命名空间会被保留。
			 */
			/*$(document).ready(function() {
				$("p").on("custom.someNamespace", function(event) {
					alert(event.namespace);
				});
				$("p").click(function(event) {
					$(this).trigger("custom.someNamespace");
				});
				$("button").click(function() {
					$("p").off("custom.someNamespace");
				});
			});*/

			/*-------------8888888----------------*/
			/*
			 * event.pageX 属性返回鼠标指针的位置，相对于文档的左边缘。
提示：该事件属性通常与 event.pageY 属性一起使用。
			 */
			/*$(document).ready(function() {
				$(document).mousemove(function(event) {
					$("span").text("X: " + event.pageX + ", Y: " + event.pageY);
				});
			});*/

			/*--------------999999---------------*/
			/*
			 * event.preventDefault() 方法阻止元素发生默认的行为。
			 * 例如：当点击提交按钮时阻止对表单的提交阻止以下 URL 的链接
			 * 提示：请使用 event.isDefaultPrevented() 方法来检查指定的事件上是否调用了 preventDefault() 方法。
			 */
			/*$(document).ready(function() {
				$("a").click(function(event) {
					event.preventDefault();
				});
			});*/

			/*------------101010101010-----------------*/
			/*
			 * event.relatedTarget 属性返回当鼠标移动时哪个元素进入或退出。
			 */
			/*$(document).ready(function() {
				$("div,p").mouseenter(function(event) {
					$("#msg").html("关联的目标为: " + event.relatedTarget.nodeName);
				});
			});*/

			/*------------11-----------------*/
			/*
			 * event.result 属性包含由被指定事件触发的事件处理程序返回的最后一个值。
			 */
			/*$(document).ready(function() {
				$("button").click(function() {
					return "Hello world!";
				});
				$("button").click(function(event) {
					$("p").html(event.result);
				});
			});*/

			/*------------12-----------------*/
			/*
			 * event.stopImmediatePropagation() 方法阻止剩下的事件处理程序被执行。
			 * 该方法阻止事件在 DOM 树中向上冒泡。
			 * 提示：请使用 event.isImmediatePropagationStopped() 方法来检查指定的事件上是否调用了该方法。
			 */
			/*$(document).ready(function() {
				$("div").click(function(event) {
					alert("事件句柄 1 被执行");
					event.stopImmediatePropagation();
				});
				$("div").click(function(event) {
					alert("事件句柄 2 被执行");
				});
				$("div").click(function(event) {
					alert("事件句柄 3 被执行");
				});
			});*/
			/*------------------13--------------*/
			/*		 
			 *event.stopPropagation() 方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。
			 * 提示：请使用 event.isPropagationStopped() 方法来检查指定的事件上是否调用了该方法。
			 * */
			/*$(document).ready(function() {
				$("span").click(function(event) {
					event.stopPropagation();
					alert("The span element was clicked.");
				});
				$("p").click(function(event) {
					alert("The p element was clicked.");
				});
				$("div").click(function() {
					alert("The div element was clicked.");
				});
			});*/
			/*----------------14---------------*/
			/*
			 * event.target 属性返回哪个 DOM 元素触发了事件。
			 * 这对比较 event.target 和 this 是非常有用的，以便判断事件是否因事件冒泡被处理。
			 */
			/*$(document).ready(function() {
				$("p, button, h1").click(function(event) {
					$("div").html("通过 " + event.target.nodeName + " 元素触发。");
				});
			});*/

			/*----------------15---------------*/
			/*
			 * event.timeStamp 属性返回返回鼠标左键第一次按下到最后一次抬起所消耗的毫秒数。
			 */
			/*$(document).ready(function() {
				$("button").click(function(event) {
					$("span").text(event.timeStamp);
				});
			});*/

			/*----------------16---------------*/
			/*
			 * event.type 属性返回哪种事件类型被触发。
			 */
			/*$(document).ready(function() {
				$("p").on("click dblclick mouseover mouseout", function(event) {
					$("div").html("Event: " + event.type);
				});
			});*/

			/*----------------17---------------*/
			/*
			 * event.which 属性返回指定事件上哪个键盘键或鼠标按钮被按下。
			 */
			/*$(document).ready(function() {
				$("input").keydown(function(event) {
					$("div").html("Key: " + event.which);
				});
			});*/

			/*----------------18---------------*/
			/*
			 * event.metakey 属性返回一个布尔值（true 或 false）表示事件触发时那个 META 键是否被按下。
			 */
			/*$("#checkMetaKey").click(function(event) {
				$("#display").text(event.metaKey);
			});*/
		</script>
		<!--18-->
		<style>
			body {
				background-color: #eef;
			}
			
			div {
				padding: 20px;
			}
		</style>
	</head>

	<body>
		<!--////////111111111//////////////-->
		<!--<h1>标题 1</h1>
		<h2>标题 2</h2>
		<p><b>注意:</b> 点击每一个 HTML 元素。currentTarget 类似于 "this", 所以返回 "true"。</p>-->

		<!--/////////   222222222222    //////////////-->
		<!--<div style="color:red">点击每一个 p 元素返回数据，通过 on() 方法来实现。</div>
		<p>这是一个段落。</p>
		<p>这是另外一个段落。</p>
		<p>这是另外一个段落。</p>-->

		<!--/////////    33333             ////////////-->
		<!--<div style="background-color:yellow">
			<p>点击按钮修改这个 div 元素的背景颜色。</p>
			<button>点我!</button>
		</div>

		<div style="background-color:yellow">
			<p>点击按钮修改这个 div 元素的背景颜色。</p>
			<button>点我!</button>
		</div>-->

		<!--///////////    4444    //////////////////-->
		<!--<a href="http://www.runoob.com/">菜鸟教程</a>
		<p>preventDefault() 方法用于防止链接打开 URL。</p>
		<p>点击链接检测默认动作是否被保护。</p>-->

		<!-- ////////////   5555 和6666666    ////////////////-->
		<!--<div style="height:100px;width:300px;padding:10px;border:1px solid blue;background-color:lightblue;">点击这个 div 元素。</div>-->

		<!--/////////////   777777    ///////////////-->
		<!--<p>点击这个段落。</p>
		<button>移除 namespace</button>-->

		<!--///////////////////   8888    //////-->
		<!--<p>鼠标指针在: <span></span></p>-->

		<!--//////////     9999    //////////-->
		<!--<a href="http://w3cschool.cc/">Go to W3Cschool.cc</a>
		<p>The preventDefault() method will prevent the link above from following the URL.</p>-->

		<!--/////////////  10101010   //////////////-->
		<!--<div style="height:200px;border:solid">这是一个 div 元素
			<p style="background-color:pink">这是一个段落</p>
		</div><br>

		<div id="msg" />-->

		<!--11-->
		<!--<button>点我显示 event.result</button>
		<p>这是一个段落。</p>-->

		<!--12-->
		<!--<div style="height:100px;width:300px;padding:10px;border:1px solid blue;background-color:lightblue;">点击这个 div 元素。</div>
		<p>由于 event.stopImmediatePropagation() ，第二个和第三个事件不会被执行。可以尝试去除这个方法查看效果。-->

		<!--13-->
		<!--<div style="height:100px;width:500px;padding:10px;border:1px solid blue;background-color:lightblue;">
			This is a div element.
			<p style="background-color:pink">This is a p element, in the div element. <br><span style="background-color:orange">This is a span element in the p and the div element.</span></p>
		</div>

		<!--14-->
		<!--<h1>这是标题</h1>
		<p>这是一个段落</p>
		<button>这是一个按钮</button>
		<p>标题，段落和按钮元素设置了点击事件。分别点击元素查看是哪个元素的事件被触发了。</p>
		<div style="color:blue;"></div>-->

		<!--15-->
		<!--<p>返回鼠标左键第一次按下到最后一次抬起所消耗的毫秒数：<span style="color:red">unknown</span> 毫秒。</p>
		<button>点我</button>-->

		<!--16-->
		<!--<p>这个段落设置了点 click, double-click, mouseover 和 mouseout 事件。<br> 如果你触发了其中一个事件，div 中会显示事件类型。</p>
		<div />-->

		<!--17-->
		<!--输入名称: <input type="text">
		<p>当你在以上输入框中输入内容时，div 中会陷入输入键的数字码。</p>
		<div />-->

		<!--18-->
		<button value="Test" name="Test" id="checkMetaKey">点我！</button>
		<div id="display"></div>
		<script>
			$("#checkMetaKey").click(function(event) {
				$("#display").text(event.metaKey);
			});
		</script>

	</body>

</html>